<template>
    <div class="container">
        <div class="top">
            <img class="logo hdPic" v-if="language=='zh-CN'" src="../../assets/common/img/logo.png" alt="">
            <img class="logo hdPic" v-if="language=='en-US'" src="../../assets/common/img/logo_en.png" alt="">
            <!--<img class="projectNamePic" src="../../assets/common/img/home/xmmc.png" alt="">-->
            <span class="proName" :class="{zh:language=='zh-CN'}">{{$t('System name')}}</span>
            <img class="line" src="../../assets/common/img/home/topLine.png" alt="">
        </div>

        <div class="carList">
            <div class="carView">
                <img class="hdPic" @click="toLink($event,'/sbgl')" :class="{grayscale:userInfo.userType!=0}" src="../../assets/common/img/home/sbgl.png" alt="">
                <p class="carName"  :class="{grayscale:userInfo.userType!=0}" >{{this.i18n.t('device management')}}</p>
                <p class="carName dy">{{this.i18n.t('device management')}}</p>
            </div>
            <div class="carView">
                <img class="hdPic" @click="toLink($event,'/rygl')" :class="{grayscale:userInfo.userType>1}" style="height: 430px" src="../../assets/common/img/home/rygl.png" alt="">
                <p class="carName" :class="{grayscale:userInfo.userType>1}">{{this.i18n.t('personnel management')}}</p>
                <p class="carName dy">{{this.i18n.t('personnel management')}}</p>
            </div>
            <div class="carView">
                <img @click="toLink($event,'/kqgl')" class="kqgl card hdPic" style="height: 416px" src="../../assets/common/img/home/kqgl.png" alt="">
                <p class="carName">{{this.i18n.t('data statistics')}}</p>
                <p class="carName dy">{{this.i18n.t('data statistics')}}</p>
            </div>
            <div class="carView">
                <img class="hdPic" @click="toLink($event,'/zhgl')" :class="{grayscale:userInfo.userType!=0}" style="height: 430px" src="../../assets/common/img/home/zhgl.png" alt="">
                <p class="carName" :class="{grayscale:userInfo.userType!=0}">{{this.i18n.t('Account management')}}</p>
                <p class="carName dy">{{this.i18n.t('Account management')}}</p>
            </div>
            <!-- <div class="carView">
                <img class="hdPic" @click="toLink($event,'/rzgl')" :class="{grayscale:userInfo.userType!=0}" src="../../assets/common/img/home/rzgl.png" alt="">
                <p class="carName" :class="{grayscale:userInfo.userType!=0}">{{this.i18n.t('Log management')}}</p>
                <p class="carName dy">{{this.i18n.t('Log management')}}</p>
            </div> -->
            <div class="carView">
                <img class="hdPic" @click="toLink($event,'/xtpz')"   src="../../assets/common/img/home/xt.png" alt="">
                <p class="carName" :class="{grayscale:userInfo.userType!=0}">{{this.i18n.t('system configuration')}}</p>
                <p class="carName dy">{{this.i18n.t('system configuration')}}</p>
            </div>
        </div>
    </div>
</template>

<script>
    import { getLocalUserInfo,getSessionStorageLanguage} from "@/assets/common/js/global";
    import { checkLogin } from "@/assets/common/js/utils/checkLogin.js";
    import { cachestroeSet,cachestroeGet,cachestroeRemove } from '@/api/login.js';
    export default {
        name: "dh_index",
        methods:{
            // 获取缓存
            cachestroeGet(key){
                return cachestroeGet(key)
            },
            toLink(event,path){
                event.stopPropagation()
                console.log(26,event.target,event.target.className.indexOf('grayscale'));
                if(event.target.className.indexOf('grayscale')!=-1){
                    this.W.$tips("warning", this.i18n.t('No permissions'));
                }else{
                    this.$router.push({ path: path ,query:{userType:this.userType}})
                }

            },
        },
        data(){
            return{
                userInfo:{},
                language:""
            }
        },
        created() {
            this.language=getSessionStorageLanguage()
            this.userInfo=getLocalUserInfo()
        },
        mounted(){
            console.log(49,this.language);
        }
    }
</script>

<style lang='less' scoped>
.container{
    width: 100%;
    height: 100%;
    position: absolute;
    top:0;
    left: 0;
    z-index: 1;
    background: url("../../assets/common/img/home/bj.jpg") no-repeat;
    background-size: 100% 100%;
    background-attachment: fixed;/* 不设置的话页面滑动时，背景会不铺满*/

    .top{
        /*border: 1px solid red;*/
        text-align: center;
        margin-top: 100px;
        position: relative;
        .logo{
            width: 126px;
            margin-right: 30px;
            /*margin-bottom: 20px;*/
        }
        .projectNamePic{
            width: 260px;
        }
        .line{
            width: 75%;
            margin: auto;
            display: block;
            position: absolute;
            left: 250px;
        }
        .proName{
            font-weight: 600;
            color: #fff;
            letter-spacing:5px;
            font-size: 35px;
            &.zh{
                position: relative;
                bottom: 15px;
            }
        }
    }
    .list{
        /*border: 1px solid #fff;*/
        text-align: center;
        margin-top: 30px;
        position: relative;
        box-sizing: border-box;
        .sbgl,.rygl,.zhgl,.kqgl,.rzgl{
            position: relative;
            z-index: 3;
        }
        .sbgl,.rzgl{
            width: 245px;
            height: 355px;
        }
        .rygl,.zhgl{
            width: 240px;
            height: 300px;
            bottom: 26px;
        }
        .sbgl{
            /*left: 1px;*/
        }
        .kqgl{
            width: 240px;
            height: 265px;
            bottom: 46px;
        }
        .sbgl,.rygl,.zhgl,.kqgl{
            margin-right: 18px;
        }
        .dy{
            position: relative;
            z-index: 1;
            width: 1284px;
            height: 355px;
            bottom: 50px;
        }
        .card:hover:not(.grayscale){
            cursor: pointer;
            opacity: 0.8;
        }
        .card:active{
            cursor: pointer;
            opacity: 0.7;
        }

    }
}
    .grayscale{
        cursor: no-drop;
        opacity: 0.4;
        /*filter: grayscale(1)*/
    }
.carList{
    margin-top: 30px;
    text-align: center;
    /*display: flex;*/
    /*align-items: center;*/
}
.carList .carView{
    margin-right: 15px;
    width: 235px;
    display: inline-block;
    position: relative;
}
.carList .carView img{
    width: 100%;
        /*width: 260px;*/
        /*height: 550px;*/
    }
.carList img:hover:not(.grayscale){
    cursor: pointer;
    opacity: 0.8;
}
.carList img:active{
    cursor: pointer;
    opacity: 0.7;
}
.carList .carView .carName{
    font-size: 21px;
    color: #fff;
    /*font-weight: 700;*/
    text-align: center;
    position: relative;
    bottom: 220px;
    /*top: 250px;*/
    /*left: 0;*/
}
.carList .carView .carName.dy{
    transform: rotateX(180deg);
    bottom: 130px;
    opacity: 0.3;
}
</style>
